import { useEffect, useState } from "react";
import {
  Bar,
  BarChart,
  CartesianGrid,
  Cell,
  LabelList,
  Legend,
  Line,
  LineChart,
  Pie,
  PieChart,
  ResponsiveContainer,
  Tooltip,
  XAxis,
  YAxis,
} from "recharts";
//扇形颜色数组
const colorArray = ["#007bff", "#FF0000", "#00FFFF"];

interface IData {
  name: string;
  value1: string;
  value2: string;
  value3: string;
  createTime: string;
}
// const data1 = [
//   {
//     name: "SRM01",
//     value1: 20,
//     value2: "初始",
//     value3: "入库",
//     createTime: new Date().toLocaleString(),
//   },
//   {
//     name: "SRM02",
//     value1: 15,
//     value2: "执行",
//     value3: "入库",
//     createTime: new Date().toLocaleString(),
//   },
//   {
//     name: "SRM03",
//     value1: 10,
//     value2: "完成",
//     value3: "入库",
//     createTime: new Date().toLocaleString(),
//   },
// ];

// const lineData = [
//   { name: "一月", value1: "400", value2: "240" },
//   { name: "二月", value1: "300", value2: "456" },
//   { name: "三月", value1: "221", value2: "200" },
// ];

const Dashboard = () => {
  const [data, setData] = useState([]);
  const [binData, setBinData] = useState([]);
  const [taskData, setTaskData] = useState([]);
  const [nowTaskData, setNowTaskData] = useState([]);
  const [alarmData, setAlarmData] = useState([]);
  const [hisTaskData, setHisTaskData] = useState([]);
  const handlePost = async () => {
    try {
      const response = await fetch(
        "http://192.168.3.101:3254/api/baswbin/getroadwaystatisticsasync",
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({}),
        }
      );

      if (!response.ok) {
        throw new Error("网络响应不是 ok");
      }
      const result = await response.json();
      setData(result.data);
    } catch (error) {
      console.error("Error while starting connections: ", error);
    }
  };

  const binPost = async () => {
    try {
      const response = await fetch(
        "http://192.168.3.101:3254/api/baswbin/getbinstatisticsasync",
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({}),
        }
      );

      if (!response.ok) {
        throw new Error("网络响应不是 ok");
      }
      const result = await response.json();
      //将result.data数组中的value值从string改成number
      for (let i = 0; i < result.data.length; i++) {
        result.data[i].value = Number(result.data[i].value);
      }
      setBinData(result.data);
    } catch (error) {
      console.error("Error while starting connections: ", error);
    }
  };

  const taskPost = async () => {
    try {
      const response = await fetch(
        "http://192.168.3.101:3254/api/srmcmd/getouttask",
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({}),
        }
      );

      if (!response.ok) {
        throw new Error("网络响应不是 ok");
      }
      const result = await response.json();
      setTaskData(result.data);
    } catch (error) {
      console.error("Error while starting connections: ", error);
    }
  };

  const hisTaskPost = async () => {
    try {
      const response = await fetch(
        "http://192.168.3.101:3254/api/srmcmd/gethistorytask?timePeriod=week",
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({}),
        }
      );

      if (!response.ok) {
        throw new Error("网络响应不是 ok");
      }
      const result = await response.json();
      setHisTaskData(result.data);
    } catch (error) {
      console.error("Error while starting connections: ", error);
    }
  };

  const nowTaskPost = async () => {
    try {
      const response = await fetch(
        "http://192.168.3.101:3254/api/srmcmd/getcurrenttask",
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({}),
        }
      );

      if (!response.ok) {
        throw new Error("网络响应不是 ok");
      }
      const result = await response.json();
      //将result.data数组中的value值从string改成number
      for (let i = 0; i < result.data.length; i++) {
        result.data[i].value = Number(result.data[i].value);
      }
      setNowTaskData(result.data);
    } catch (error) {
      console.error("Error while starting connections: ", error);
    }
  };

  const alarmPost = async () => {
    try {
      const response = await fetch(
        "http://192.168.3.101:3254/api/devicealarmlog/getalarmlog",
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({}),
        }
      );

      if (!response.ok) {
        throw new Error("网络响应不是 ok");
      }
      const result = await response.json();
      setAlarmData(result.data);
    } catch (error) {
      console.error("Error while starting connections: ", error);
    }
  };
  useEffect(() => {
    const runTask = () => {
      try {
        handlePost();
        binPost();
        taskPost();
        hisTaskPost();
        nowTaskPost();
        alarmPost();
      } catch (error) {
        console.error("Error while starting connections: ", error);
      }
    };

    runTask(); // 页面刚进入时执行一次

    const intervalId = setInterval(runTask, 10000); // 每5秒执行一次

    // 清除定时器以防止内存泄漏
    return () => clearInterval(intervalId);
  }, []);

  return (
    <div
      style={{
        display: "grid",
        gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))",
        gridAutoRows: "minmax(300px, auto)",
        gap: "20px",
        minHeight: "100vh",
        padding: "20px",
        boxSizing: "border-box",
        backgroundColor: "#1e1e2f",
        fontFamily: "Arial, sans-serif",
      }}
    >
      {/* 1号区域 - 条形图 */}
      <div
        style={{
          gridColumn: 1,
          gridRow: 1,
          borderRadius: "10px",
          boxShadow: "0 8px 24px rgba(0, 0, 0, 0.1)",
          backgroundColor: "#2e2e42",
          padding: "15px",
          transition: "transform 0.3s, box-shadow 0.3s",
        }}
        onMouseEnter={(e) => {
          e.currentTarget.style.transform = "scale(1.02)";
          e.currentTarget.style.boxShadow = "0 12px 36px rgba(0, 0, 0, 0.2)";
        }}
        onMouseLeave={(e) => {
          e.currentTarget.style.transform = "scale(1)";
          e.currentTarget.style.boxShadow = "0 8px 24px rgba(0, 0, 0, 0.1)";
        }}
      >
        <div
          style={{
            backgroundColor: "#1e1e1e",
            border: "1px solid #333",
            borderRadius: "10px",
            fontFamily: "Roboto, sans-serif",
            margin: "30px auto 0", // 自动居中
            width: "90%", // 百分比宽度
            maxWidth: 1200, // 最大宽度限制
            position: "relative", // 为图表容器定位准备
            padding: "20px 0", // 添加内边距
          }}
        >
          <h3
            style={{
              color: "#cccccc", // 字体颜色变为浅灰色
              textAlign: "center",
              marginBottom: "24px",
              fontSize: "28px", // 字体大小稍微大一点
            }}
          >
            巷道统计
          </h3>
          <ResponsiveContainer width="100%" height={400}>
            <BarChart
              width={500} // 增加宽度
              height={400} // 增加高度
              data={data}
              barSize={30} // 增加柱子宽度
              margin={{ top: 20, right: 30, left: 20, bottom: 50 }}
            >
              <defs>
                <linearGradient id="color1" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="0%" stopColor="#00bfff" stopOpacity={1} /> //
                  使用亮蓝色
                  <stop offset="100%" stopColor="#00bfff" stopOpacity={0.5} />
                </linearGradient>
                <linearGradient id="color2" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="0%" stopColor="#ff6347" stopOpacity={1} /> //
                  使用亮红色
                  <stop offset="100%" stopColor="#ff6347" stopOpacity={0.5} />
                </linearGradient>
              </defs>
              <CartesianGrid strokeDasharray="3 3" stroke="#444" />
              <XAxis
                dataKey="name"
                stroke="#cccccc" // X轴刻度颜色变为浅灰色
                label={{
                  value: "巷道名称",
                  angle: 0,
                  position: "bottom",
                  fill: "#cccccc", // X轴标签颜色变为浅灰色
                  fontSize: "16px", // 字体大小稍微大一点
                }}
                tick={{ fill: "#cccccc", fontFamily: "Roboto, sans-serif" }}
              />
              <YAxis
                stroke="#cccccc" // Y轴刻度颜色变为浅灰色
                label={{
                  value: "数量",
                  angle: 0,
                  position: "top",
                  fill: "#cccccc", // Y轴标签颜色变为浅灰色
                  fontSize: "16px", // 字体大小稍微大一点
                  dx: -20,
                  dy: -20,
                }}
                tick={{ fill: "#cccccc", fontFamily: "Roboto, sans-serif" }}
              />

              <Legend
                verticalAlign="top"
                height={36}
                wrapperStyle={{
                  top: 10,
                  left: 20,
                  fontSize: "16px", // 字体大小稍微大一点
                  fontFamily: "Roboto, sans-serif",
                  color: "#cccccc", // 图例颜色变为浅灰色
                }}
              />
              <Bar dataKey="value1" fill="url(#color1)" name="空闲">
                <LabelList dataKey="value1" position="top" fill="#fff" />
              </Bar>
              <Bar dataKey="value2" fill="url(#color2)" name="占用">
                <LabelList dataKey="value2" position="top" fill="#fff" />
              </Bar>
            </BarChart>
          </ResponsiveContainer>
        </div>
      </div>

      {/* 2号区域 - 图片 */}
      <div
        style={{
          gridColumn: 2,
          gridRow: 1,
          borderRadius: "10px",
          boxShadow: "0 8px 24px rgba(0, 0, 0, 0.1)",
          backgroundColor: "#2e2e42",
          padding: "15px",
          transition: "transform 0.3s, box-shadow 0.3s",
        }}
        onMouseEnter={(e) => {
          e.currentTarget.style.transform = "scale(1.02)";
          e.currentTarget.style.boxShadow = "0 12px 36px rgba(0, 0, 0, 0.2)";
        }}
        onMouseLeave={(e) => {
          e.currentTarget.style.transform = "scale(1)";
          e.currentTarget.style.boxShadow = "0 8px 24px rgba(0, 0, 0, 0.1)";
        }}
      >
        <div
          style={{
            backgroundColor: "#1e1e1e",
            padding: "20px",
            borderRadius: "10px",
            textAlign: "center",
            marginTop: "65px",
            border: "2px solid #444",
            boxShadow: "0 8px 16px rgba(0,0,0,0.5)",
          }}
        >
          <h3 style={{ color: "#fff", fontSize: "24px", marginBottom: "15px" }}>
            图片1
          </h3>
          <img
            src="external-images/aca1fcd373dccb9f5e7c8e51358938f.jpg" //mklink /J "D:\your-project\public\external-images" "D:\external-images"
            alt="Placeholder"
            style={{
              width: "100%",
              height: "auto",
              objectFit: "cover",
              borderRadius: "5px",
              border: "1px solid #555",
              boxShadow: "0 4px 8px rgba(0,0,0,0.3)",
            }}
          />
        </div>
      </div>

      {/* 3号区域 - 图片 */}
      <div
        style={{
          gridColumn: 3,
          gridRow: 1,
          borderRadius: "10px",
          boxShadow: "0 8px 24px rgba(0, 0, 0, 0.1)",
          backgroundColor: "#2e2e42",
          padding: "15px",
          transition: "transform 0.3s, box-shadow 0.3s",
        }}
        onMouseEnter={(e) => {
          e.currentTarget.style.transform = "scale(1.02)";
          e.currentTarget.style.boxShadow = "0 12px 36px rgba(0, 0, 0, 0.2)";
        }}
        onMouseLeave={(e) => {
          e.currentTarget.style.transform = "scale(1)";
          e.currentTarget.style.boxShadow = "0 8px 24px rgba(0, 0, 0, 0.1)";
        }}
      >
        <div
          style={{
            backgroundColor: "#1e1e1e",
            padding: "20px",
            borderRadius: "10px",
            textAlign: "center",
            marginTop: "65px",
            border: "2px solid #444",
            boxShadow: "0 8px 16px rgba(0,0,0,0.5)",
          }}
        >
          <h3 style={{ color: "#fff", fontSize: "24px", marginBottom: "15px" }}>
            图片2
          </h3>
          <img
            src="external-images/aca1fcd373dccb9f5e7c8e51358938f - 副本.jpg" //mklink /J "D:\your-project\public\external-images" "D:\external-images"
            alt="Placeholder"
            style={{
              width: "100%",
              height: "auto",
              objectFit: "cover",
              borderRadius: "5px",
              border: "1px solid #555",
              boxShadow: "0 4px 8px rgba(0,0,0,0.3)",
            }}
          />
        </div>
      </div>

      {/* 4号区域 - 饼图 */}
      <div
        style={{
          gridColumn: 4,
          gridRow: 1,
          borderRadius: "10px",
          boxShadow: "0 8px 24px rgba(0, 0, 0, 0.1)",
          backgroundColor: "#2e2e42",
          padding: "15px",
          transition: "transform 0.3s, box-shadow 0.3s",
        }}
        onMouseEnter={(e) => {
          e.currentTarget.style.transform = "scale(1.02)";
          e.currentTarget.style.boxShadow = "0 12px 36px rgba(0, 0, 0, 0.2)";
        }}
        onMouseLeave={(e) => {
          e.currentTarget.style.transform = "scale(1)";
          e.currentTarget.style.boxShadow = "0 8px 24px rgba(0, 0, 0, 0.1)";
        }}
      >
        <div
          style={{
            backgroundColor: "#1e1e1e",
            border: "1px solid #333",
            borderRadius: "10px",
            fontFamily: "Roboto, sans-serif",
            margin: "15px 2% 0", // 改为百分比边距
            boxShadow: "0 4px 8px rgba(0, 0, 0, 0.5)",
            width: "96%", // 增加宽度自适应
            maxWidth: "800px", // 限制最大宽度
            marginLeft: "auto", // 水平居中
            marginRight: "auto",
          }}
        >
          <h3
            style={{
              color: "#cccccc", // 字体颜色变为浅灰色
              textAlign: "center",
              marginBottom: "24px",
              fontSize: "28px", // 字体大小稍微大一点
              textShadow: "0 2px 4px rgba(0, 0, 0, 0.5)", // 添加文字阴影
            }}
          >
            货位统计
          </h3>

          <div
            style={{
              display: "flex",
              justifyContent: "center",
              height: "100%",
              boxShadow: "0 4px 8px rgba(0, 0, 0, 0.2)",
              position: "relative", // 新增定位
              minHeight: "400px", // 最小高度保证显示
              width: "100%", // 宽度铺满
            }}
          >
              <PieChart  width={350} height={425}>
                <Legend
                  iconType="circle"
                  wrapperStyle={{
                    width: "90%",
                    top: "5%", // 改为相对定位
                    right: "2%",
                    backgroundColor: "#fff",
                    border: "1px solid #ddd",
                    padding: "10px",
                    borderRadius: "5px",
                    opacity: 0.7,
                    boxShadow: "0 2px 4px rgba(0, 0, 0, 0.3)",
                    position: "absolute", // 绝对定位适应不同尺寸
                  }}
                />
                <Pie
                  dataKey="value"
                  outerRadius="60%" // 改为百分比半径
                  innerRadius="30%"
                  fill="#007bff"
                  label={{
                    fontSize: "1vw", // 响应式字体
                    fill: "#fff",
                  }}
                  data={[...binData]}
                >
                  {binData.map((_, index) => (
                    <Cell
                      key={`cell-${index}`}
                      fill={colorArray[index % colorArray.length]}
                      style={{ transition: "fill 0.3s ease" }} // 添加颜色过渡动画
                    />
                  ))}
                </Pie>
              </PieChart>
          </div>
        </div>
      </div>

      {/* 5号区域 - 表格 */}
      <div
        style={{
          gridColumn: 1,
          gridRow: 2,
          borderRadius: "10px",
          boxShadow: "0 8px 24px rgba(0, 0, 0, 0.1)",
          backgroundColor: "#2e2e42",
          padding: "1.5rem",
          transition: "transform 0.3s, box-shadow 0.3s",
          width: "100%", // 添加以使div宽度自适应
          boxSizing: "border-box", // 确保内边距和边框包含在宽度内
        }}
        onMouseEnter={(e) => {
          e.currentTarget.style.transform = "scale(1.02)";
          e.currentTarget.style.boxShadow =
            "0 1.2rem 3.6rem rgba(0, 0, 0, 0.2)";
        }}
        onMouseLeave={(e) => {
          e.currentTarget.style.transform = "scale(1)";
          e.currentTarget.style.boxShadow =
            "0 0.8rem 2.4rem rgba(0, 0, 0, 0.1)";
        }}
      >
        <h3
          style={{
            color: "#fff",
            textAlign: "center",
            marginBottom: "2rem",
            fontSize: "2rem", // 修改为相对单位
            fontFamily: "Roboto, sans-serif",
            fontWeight: "bold",
          }}
        >
          出入库任务
        </h3>

        <table
          style={{
            width: "100%",
            borderCollapse: "separate",
            borderSpacing: "0",
            boxShadow: "0 0.8rem 1.6rem rgba(0,0,0,0.2)",
            backgroundColor: "#212121",
            fontFamily: "Roboto, sans-serif",
            color: "#ecf0f1",
          }}
        >
          <thead>
            <tr
              style={{
                backgroundColor: "#1976d2",
                borderBottom: "2px solid #4CAF50",
              }}
            >
              <th
                style={{
                  border: "1px solid #000",
                  padding: "1rem", // 修改为相对单位
                  textAlign: "left",
                  color: "#ecf0f1",
                }}
              >
                设备
              </th>
              <th
                style={{
                  border: "1px solid #000",
                  padding: "1rem", // 修改为相对单位
                  textAlign: "left",
                  color: "#ecf0f1",
                }}
              >
                托盘号
              </th>
              <th
                style={{
                  border: "1px solid #000",
                  padding: "1rem", // 修改为相对单位
                  textAlign: "left",
                  color: "#ecf0f1",
                }}
              >
                状态
              </th>
              <th
                style={{
                  border: "1px solid #000",
                  padding: "1rem", // 修改为相对单位
                  textAlign: "left",
                  color: "#ecf0f1",
                }}
              >
                任务类型
              </th>
              <th
                style={{
                  border: "1px solid #000",
                  padding: "1rem", // 修改为相对单位
                  textAlign: "left",
                  color: "#ecf0f1",
                }}
              >
                时间
              </th>
            </tr>
          </thead>
          <tbody>
            {taskData.map((item:IData, index) => (
              <tr
                key={index}
                style={{
                  backgroundColor: index % 2 === 0 ? "#ffffff" : "#f5f5f5",
                  transition: "background-color 0.3s",
                  borderBottom: "1px solid #e0e0e0",
                }}
              >
                <td
                  style={{
                    border: "1px solid #000",
                    padding: "1rem", // 修改为相对单位
                    color: "#212121",
                  }}
                >
                  {item.name}
                </td>
                <td
                  style={{
                    border: "1px solid #000",
                    padding: "1rem", // 修改为相对单位
                    color: "#212121",
                  }}
                >
                  {item.value1}
                </td>
                <td
                  style={{
                    border: "1px solid #000",
                    padding: "1rem", // 修改为相对单位
                    fontWeight: item.value2 === "成功" ? "bold" : "normal",
                    color: item.value2 === "成功" ? "#000" : "#f44336",
                  }}
                >
                  {item.value2}
                </td>
                <td
                  style={{
                    border: "1px solid #000",
                    padding: "1rem", // 修改为相对单位
                    color: "#212121",
                  }}
                >
                  {item.value3}
                </td>
                <td
                  style={{
                    border: "1px solid #000",
                    padding: "1rem", // 修改为相对单位
                    color: "#212121",
                  }}
                >
                  {item.createTime}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {/* 6号区域 - 饼图 */}
      <div
        style={{
          gridColumn: 2,
          gridRow: 2,
          borderRadius: "10px",
          boxShadow: "0 8px 24px rgba(0, 0, 0, 0.1)",
          backgroundColor: "#2e2e42",
          padding: "15px",
          transition: "transform 0.3s, box-shadow 0.3s",
        }}
        onMouseEnter={(e) => {
          e.currentTarget.style.transform = "scale(1.02)";
          e.currentTarget.style.boxShadow = "0 12px 36px rgba(0, 0, 0, 0.2)";
        }}
        onMouseLeave={(e) => {
          e.currentTarget.style.transform = "scale(1)";
          e.currentTarget.style.boxShadow = "0 8px 24px rgba(0, 0, 0, 0.1)";
        }}
      >
        <div
          style={{
            backgroundColor: "#1e1e1e",
            border: "1px solid #333",
            borderRadius: "10px",
            fontFamily: "Roboto, sans-serif",
            margin: "15px 2% 0", // 改为百分比边距
            boxShadow: "0 4px 8px rgba(0, 0, 0, 0.5)",
            width: "96%", // 增加宽度自适应
            maxWidth: "800px", // 限制最大宽度
            marginLeft: "auto", // 水平居中
            marginRight: "auto",
          }}
        >
          <h3
            style={{
              color: "#cccccc", // 字体颜色变为浅灰色
              textAlign: "center",
              marginBottom: "24px",
              fontSize: "28px", // 字体大小稍微大一点
              textShadow: "0 2px 4px rgba(0, 0, 0, 0.5)", // 添加文字阴影
            }}
          >
            当前任务
          </h3>

          <div
            style={{
              display: "flex",
              justifyContent: "center",
              height: "100%",
              boxShadow: "0 4px 8px rgba(0, 0, 0, 0.2)",
              position: "relative", // 新增定位
              minHeight: "400px", // 最小高度保证显示
              width: "100%", // 宽度铺满
            }}
          >
              <PieChart  width={350} height={425}>
                <Legend
                  iconType="circle"
                  wrapperStyle={{
                    width: "90%",
                    top: "5%", // 改为相对定位
                    right: "2%",
                    backgroundColor: "#fff",
                    border: "1px solid #ddd",
                    padding: "10px",
                    borderRadius: "5px",
                    opacity: 0.7,
                    boxShadow: "0 2px 4px rgba(0, 0, 0, 0.3)",
                    position: "absolute", // 绝对定位适应不同尺寸
                  }}
                />
                <Pie
                  dataKey="value"
                  outerRadius="60%" // 改为百分比半径
                  innerRadius="30%"
                  fill="#007bff"
                  label={{
                    fontSize: "1vw", // 响应式字体
                    fill: "#fff",
                  }}
                  data={[...nowTaskData]}
                >
                  {binData.map((_, index) => (
                    <Cell
                      key={`cell-${index}`}
                      fill={colorArray[index % colorArray.length]}
                      style={{ transition: "fill 0.3s ease" }} // 添加颜色过渡动画
                    />
                  ))}
                </Pie>
              </PieChart>
          </div>
        </div>
      </div>

      {/* 7号区域 - 折线图 */}
      <div
        style={{
          gridColumn: 3,
          gridRow: 2,
          borderRadius: "10px",
          boxShadow: "0 8px 24px rgba(0, 0, 0, 0.1)",
          backgroundColor: "#2e2e42",
          padding: "15px",
          transition: "transform 0.3s, box-shadow 0.3s",
        }}
        onMouseEnter={(e) => {
          e.currentTarget.style.transform = "scale(1.02)";
          e.currentTarget.style.boxShadow = "0 12px 36px rgba(0, 0, 0, 0.2)";
        }}
        onMouseLeave={(e) => {
          e.currentTarget.style.transform = "scale(1)";
          e.currentTarget.style.boxShadow = "0 8px 24px rgba(0, 0, 0, 0.1)";
        }}
      >
        <div
          style={{
            backgroundColor: "#1e1e1e",
            border: "1px solid #333",
            borderRadius: "10px",
            fontFamily: "Roboto, sans-serif",
            margin: "30px auto 0", // 自动居中
            width: "90%", // 百分比宽度
            maxWidth: 1200, // 最大宽度限制
            position: "relative", // 为图表容器定位准备
            padding: "20px 0", // 添加内边距
          }}
        >
          <h3
            style={{
              color: "#fff",
              textAlign: "center",
              marginBottom: "20px",
              fontSize: "28px",
              fontWeight: "bold",
            }}
          >
            历史任务
          </h3>
          <ResponsiveContainer width="100%" height={400}>
            <LineChart
              data={hisTaskData}
              margin={{ top: 20, right: 30, left: 20, bottom: 5 }}
            >
              <CartesianGrid strokeDasharray="4 4" stroke="#555" />
              <XAxis
                dataKey="name"
                stroke="#fff"
                tickLine={false}
                axisLine={false}
                tick={{ fill: "#fff", fontSize: "14px" }}
                interval={0}
                tickFormatter={(value) =>
                  window.innerWidth < 480 ? `${value}`.substring(0, 3) : value
                }
              />
              <YAxis
                stroke="#fff"
                tickLine={false}
                axisLine={false}
                tick={{ fill: "#fff", fontSize: "14px" }}
              />
              <Tooltip
                contentStyle={{
                  backgroundColor: "rgba(255, 255, 255, 0.9)",
                  border: "1px solid #ccc",
                  padding: "10px",
                  borderRadius: "4px",
                }}
                labelStyle={{ color: "#000", fontWeight: "bold" }}
                itemStyle={{ color: "#000" }}
              />
              <Legend
                align="right"
                verticalAlign="top"
                height={36}
                iconType="line"
                formatter={(value) => `${value}`}
                wrapperStyle={{
                  paddingLeft: window.innerWidth < 768 ? "10px" : "20px",
                }}
                iconSize={window.innerWidth < 480 ? 12 : 16}
              />
              <Line
                type="monotone"
                dataKey="value1"
                stroke="#68d391"
                name="入库"
                dot={false}
                activeDot={{ r: 8, stroke: "#68d391", strokeWidth: 2 }}
                strokeWidth={2}
                isAnimationActive
              >
                <LabelList dataKey="value1" fill="#fff" position="top" />
              </Line>
              <Line
                type="monotone"
                dataKey="value2"
                stroke="#f6ad55"
                name="出库"
                dot={false}
                activeDot={{ r: 8, stroke: "#f6ad55", strokeWidth: 2 }}
                strokeWidth={2}
                isAnimationActive
              >
                <LabelList dataKey="value2" fill="#fff" position="top" />
              </Line>
            </LineChart>
          </ResponsiveContainer>
        </div>
      </div>

      {/* 8号区域 - 表格 */}
      <div
        style={{
          gridColumn: 4,
          gridRow: 2,
          borderRadius: "10px",
          boxShadow: "0 8px 24px rgba(0, 0, 0, 0.1)",
          backgroundColor: "#2e2e42",
          padding: "15px",
          transition: "transform 0.3s, box-shadow 0.3s",
        }}
        onMouseEnter={(e) => {
          e.currentTarget.style.transform = "scale(1.02)";
          e.currentTarget.style.boxShadow = "0 12px 36px rgba(0, 0, 0, 0.2)";
        }}
        onMouseLeave={(e) => {
          e.currentTarget.style.transform = "scale(1)";
          e.currentTarget.style.boxShadow = "0 8px 24px rgba(0, 0, 0, 0.1)";
        }}
      >
        <h3
          style={{
            color: "#fff",
            textAlign: "center",
            marginBottom: "20px",
            fontSize: "32px",
            fontFamily: "Roboto, sans-serif",
          }}
        >
          报警信息
        </h3>
        <table
          style={{
            width: "100%",
            borderCollapse: "collapse",
            fontFamily: "Roboto, sans-serif",
            boxShadow: "0 4px 8px rgba(0, 0, 0, 0.1)",
            borderRadius: "8px",
            overflow: "hidden",
            backgroundColor: "#212121",
          }}
        >
          <thead>
            <tr style={{ backgroundColor: "#b71c1c", color: "#fff" }}>
              <th
                style={{
                  borderRight: "1px solid #ff5722",
                  padding: "16px",
                  textAlign: "left",
                }}
              >
                设备名称
              </th>
              <th
                style={{
                  borderRight: "1px solid #ff5722",
                  padding: "16px",
                  textAlign: "left",
                }}
              >
                报警信息
              </th>
              <th style={{ padding: "16px", textAlign: "left" }}>报警时间</th>
            </tr>
          </thead>
          <tbody>
            {alarmData.map((item:IData, index) => (
              <tr
                key={index}
                style={{
                  backgroundColor: index % 2 === 0 ? "#5d3131" : "#302f4b",
                  color: "#ff5722",
                  border: "1px solid #b71c1c",
                }}
              >
                <td
                  style={{
                    borderRight: "1px solid #ff5722",
                    padding: "16px",
                    color: "#fff",
                  }}
                >
                  {item.name}
                </td>
                <td
                  style={{
                    borderRight: "1px solid #ff5722",
                    padding: "16px",
                    color: "#fff",
                  }}
                >
                  {item.value1}
                </td>
                <td
                  style={{
                    padding: "16px",
                    color: "#fff",
                  }}
                >
                  {item.value2}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
};

export default Dashboard;
